<%@ page language="java" contentType="text/html;charset=utf-8" pageEncoding="utf-8"%>
<%@include file="../common/header-assets.jsp"%>
<%@include file="../common/chart-assets.jsp"%>
<!-- Start right Content here -->
<!-- ============================================================== -->
<div class="content-page">
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box">
                        <h4 class="page-title float-left font-16">数据图表</h4>

                        <ol class="breadcrumb float-right">
                            <li class="breadcrumb-item">数据管理</li>
                            <li class="breadcrumb-item active">数据图表</li>
                        </ol>

                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
            <div class="card-box">
                <%@include file="../common/search.jsp"%>
                <hr >
                <div class="row">
                    <div class="col-sm-12">
                        <div id="container" style="height:400px"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    let _this = this;
    $(function(){
        //初始化下拉列表
        $(".select2").select2();
        //初始化日期时间控件
        initDateTimeBox(["s_startTime", "s_endTime"]);
        //初始化查询条件
        initQueryCondi();
    });

    //初始化查询条件
    let initQueryCondi = () =>{
        getDataByAjax("<c:url value='device/queryAll'></c:url>", "post", null, "json", {"dataType": "level"});
    }

    //回调函数
    var ajaxCallBack = (data, extraData) =>{
        if(extraData.dataType == "level"){
            levelData = data.obj;
            let pValue;
            //加载省份数据
            dealWithData(levelData, new Param("s_provinceCode", "provinceCode", "provinceName", null, null));
            //加载地级市数据
            pValue = $("#s_provinceCode").val();
            dealWithData(levelData, new Param("s_cityCode", "cityCode", "cityName", "provinceCode", new Array(pValue)));
            //加载县区数据
            pValue = $("#s_cityCode").val();
            dealWithData(levelData, new Param("s_areaCode", "areaCode", "areaName", "cityCode", new Array(pValue)));
            //加载隐患点数据
            pValue = $("#s_areaCode").val();
            dealWithData(levelData, new Param("s_hiddenPointId", "hiddenPointId", "hiddenPointName", "areaCode", new Array(pValue)));
            //加载监测点数据
            pValue = $("#s_hiddenPointId").val();
            dealWithData(levelData, new Param("s_deviceId", "id", "deviceName", "hiddenPointId", new Array(pValue)));
        }
    }

    //省份下拉框改变事件
    $("#s_provinceCode").change(function () {
        let id = "s_cityCode";
        let pValue = $(this).val();
        //加载地级市
        dealWithData(levelData, new Param(id, "cityCode", "cityName", "provinceCode", new Array(pValue)));
        $("#s_cityCode").change();
    });

    //地级市下拉框改变事件
    $("#s_cityCode").change(function () {
        let id = "s_areaCode";
        let pValue = $(this).val();
        //加载县区
        dealWithData(levelData, new Param(id, "areaCode", "areaName", "cityCode", new Array(pValue)));
        $("#s_areaCode").change();
    });

    //县区下拉框改变事件
    $("#s_areaCode").change(function () {
        let id = "s_hiddenPointId";
        let pValue = $(this).val();
        //加载隐患点
        dealWithData(levelData, new Param(id, "hiddenPointId", "hiddenPointName", "areaCode", new Array(pValue)));
        $("#s_hiddenPointId").change();
    });

    //隐患点下拉列表改变事件
    $("#s_hiddenPointId").change(function () {
        let id = "s_deviceId";
        let pValue = $(this).val();
        //加载监测点
        dealWithData(levelData, new Param(id, "id", "deviceName", "hiddenPointId", new Array(pValue)));
    })

    $("#search").click(function(){
        refreshContent();
    })

    let refreshContent = () =>{
        let provinceCode = $("#s_provinceCode").val();
        let cityCode = $("#s_cityCode").val();
        let areaCode = $("#s_areaCode").val();
        let hiddenPointId = $("#s_hiddenPointId").val();
        let deviceId = $("#s_deviceId").val();
        let startTime = $("#s_startTime").val();
        let endTime = $("#s_endTime").val();
        $.ajax({
            url:"<c:url value='/deviceData/queryAll'/>",
            type:"post",
            data:{
                provinceCode,
                cityCode,
                areaCode,
                hiddenPointId,
                deviceId,
                startTime,
                endTime
            },
            dataType:"json",
            success:function(data){
                let $container = $("#container");
                if(!data.obj.length){
                    $container.css("display", "none");
                    alert("没有数据！");
                    return false;
                }else{
                    _this.data = data.obj;
                    $container.css("display", "block");
                    showChart();
                }
            }
        });
    }

    //显示图表
    function showChart(){
        let data = _this.data, tmpTime, date_real, time_real, date, time;
        let deviceName, series=[];
        let row;
        let x=[], y=[], h=[], xy=[], xyh=[], flag = "d", unit="mm", suffix="位移";

        deviceName =(function(){
            let dom_id =  $("#s_deviceId")[0], opts = dom_id.options, len= opts.length;
            for(let i = 0; i < len; i++){
                if(opts[i].value == dom_id.value)
                    return opts[i].text;
            }
            return "";
        })();
        //series
        for(let index in data){
            row = data[index];
            tmpTime = row.dacTime.match(/^(\d{4}-\d{2}-\d{2}) (\d{2}:\d{2}:\d{2})$/);
            if(tmpTime != null){
                date_real = tmpTime[1];
                time_real = tmpTime[2];
                date = date_real.split("-");
                time = time_real.split(":");
                let month = parseInt("0"+(parseInt(date[1])-1));
                x.push([Date.UTC(date[0],month,date[2],time[0],time[1],time[2]), parseFloat((row[flag+"x"]*1000).toFixed(2))]);
                y.push([Date.UTC(date[0],month,date[2],time[0],time[1],time[2]), parseFloat((row[flag+"y"]*1000).toFixed(2))]);
                h.push([Date.UTC(date[0],month,date[2],time[0],time[1],time[2]), parseFloat((row[flag+"h"]*1000).toFixed(2))]);
                xy.push([Date.UTC(date[0],month,date[2],time[0],time[1],time[2]), parseFloat((row[flag+"xy"]*1000).toFixed(2))]);
                xyh.push([Date.UTC(date[0],month,date[2],time[0],time[1],time[2]), parseFloat((row[flag+"xyh"]*1000).toFixed(2))]);
            }
        }
        series.push({name:"北向"+ suffix, data:x, selected: true});
        series.push({name:"东向"+ suffix, data:y, selected: true});
        series.push({name:"高程"+ suffix, data:h, selected: true});
        series.push({name:"水平"+ suffix, data:xy, selected: true});
        series.push({name:"三维"+ suffix, data:xyh, selected: true});

        $("#container").highcharts({
            chart: {
                type: "line"
            },
            boost: {
                useGPUTranslations: true
            },
            title: {
                text: deviceName +"-" + "-" + suffix,
                x: -20
            },
            xAxis: {
                type: "datetime",
                labels: {
                    rotation: -20,
                    formatter: function() {
                        return Highcharts.dateFormat("%Y-%m-%d %H:%M:%S", this.value);
                    }
                }
            },
            yAxis: {
                title: {
                    text: suffix + "(" + unit + ")"
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: "#808080"
                }]
            },
            plotOptions: {
                series: {
                    showCheckbox: true
                },
                line: {
                    events: {
                        checkboxClick: function(event) {
                            if(event.checked == true) {
                                this.show();
                            }else {
                                this.hide();
                            }
                        },
                        legendItemClick: function() {//return false 即可禁用LegendIteml，防止通过点击item显示隐藏系列
                            return false;
                        }
                    }
                }
            },
            tooltip: {
                xDateFormat: "%Y-%m-%d %H:%M:%S",
                valueSuffix: " "+ unit
            },
            legend: {
                layout: "horizontal",
                align: "center",
                verticalAlign: "bottom",
                borderWidth: 0,
                itemDistance: 8
            },
            credits: {
                enabled: false
            },
            series: series
        });
    }
</script>